<script setup lang="ts">
import { ref } from 'vue'
import Notification from './Notification.vue'

const notificationVisible = ref(false)
const notificationType = ref<'success' | 'error' | 'warning' | 'info'>('info')

const showNotification = (type: 'success' | 'error' | 'warning' | 'info') => {
  notificationType.value = type
  notificationVisible.value = true
}

const onClose = () => {
  console.log('通知已关闭')
}
</script>

<template>
  <div>
    <button @click="showNotification('success')">成功通知</button>
    <button @click="showNotification('error')">错误通知</button>

    <Notification
        v-model:visible="notificationVisible"
        :type="notificationType"
        title="操作成功"
        message="您的操作已成功完成"
        :duration="3000"
        @close="onClose"
    />

    <!-- 使用预设动画 -->
    <Notification
        v-model:visible="notificationVisible"
        transition="back"
        :transition-duration="500"
    />

    <!-- 使用自定义贝塞尔曲线 -->
    <Notification
        v-model:visible="notificationVisible"
        transition="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
        :transition-duration="800"
    />

    <!-- 使用CSS原生函数 -->
    <Notification
        v-model:visible="notificationVisible"
        transition="steps(4, jump-end)"
        :transition-duration="1000"
    />

  </div>
</template>